<template>
  <div id="mains" :style="{ width: '580px', height: '370px'}" ></div>
</template>

<script setup>
import {onMounted} from "vue";
import * as echarts from 'echarts';
onMounted(()=>{
  let chartDom = document.getElementById('mains');
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    title: {
      text: '母猪数量占比',
      left: 'center',
      top:'5%'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: '3%',
      top: '2%'
    },
    series: [
      {
        name: '母猪数量',
        type: 'pie',
        radius: '50%',
        label:{
          normal: {
            formatter: '{b}({d}%)',
          }
        },
        data: [
          { value: 1048, name: '宁乡猪' },
          { value: 735, name: '蓝塘猪' },
          { value: 580, name: '成华猪' },
          { value: 484, name: '杜洛克' },
          { value: 300, name: '皮特兰' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
})
</script>

<style lang="less" scoped>

</style>
